<template>
  <page-frame>
    <div class="serviceReservation">
      <div class="toptitle">
        <div class="left">服务预约</div>
        <div class="right">
          <div class="btns">
            <el-button class="lightGreenBtn">提交</el-button>
          </div>
        </div>
      </div>
      <div class="borderT"></div>
      <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
          <el-row>
            <el-col :span="10" :offset="2">
              <el-form-item label="服务对象" prop="name">
                <el-input v-model="ruleForm.name"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="10">
              <el-form-item label="来源" prop="resource">
                <el-select v-model="ruleForm.resource" placeholder="请选择来源">
                  <el-option label="电话" value="dianhua"></el-option>
                  <el-option label="微信" value="weixin"></el-option>
                  <el-option label="院内咨询" value="yuanneizixun"></el-option>
                  <el-option label="其他" value="others"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="10" :offset="2">
              <el-form-item label="服务项目" prop="serviceItem">
                <el-select v-model="ruleForm.serviceItem" placeholder="请选择标准">
                  <el-option label="护理" value="huli"></el-option>
                  <el-option label="医疗" value="yiliao"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="10" >
              <el-form-item label="计费标准" prop="rule">
                <el-select v-model="ruleForm.rule" placeholder="请选择标准">
                  <el-option label="一次" value="yici"></el-option>
                  <el-option label="一月" value="yiyue"></el-option>
                  <el-option label="多次" value="duoci"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="10" :offset="2">
              <el-form-item label="收费" prop="toll">
                <el-input v-model="ruleForm.toll"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="10">
              <el-form-item label="结算方式">
                <el-radio-group v-model="ruleForm.method">
                  <el-radio label="账户结算"></el-radio>
                  <el-radio label="他人代付"></el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="10" :offset="2">

            </el-col>
          </el-row>
          <el-row>
            <el-col :span="10" :offset="2">
              <el-form-item label="移动电话" prop="phon">
                <el-input v-model="ruleForm.phon"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="10" >
              <el-form-item label="预约时间" prop="reserveDate">
                <el-date-picker
                  v-model="ruleForm.reserveDate"
                  type="date"
                  placeholder="预约时间"
                >
                </el-date-picker>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="10" :offset="2">
              <el-form-item label="服务地址" prop="address">
                <el-input v-model="ruleForm.address"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="10">
              <el-form-item label="指定服务人员" prop="servicePersonnel">
                <el-input v-model="ruleForm.servicePersonnel"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="10" :offset="2">
              <el-form-item label="服务需求">
                <el-input type="textarea" v-model="ruleForm.demand"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
    </div>
  </page-frame>
</template>

<script >
  export default {
    data () {
      return {
        ruleForm:{
          name:'',
          phon:'',
          rule:'',
          address:'',
          serviceItem:'',
          resource:'',
          reserveDate:'',
          toll:'',
          method:'',
          servicePersonnel:'',
          demand:'',
        },
        rules:{},
      }
    },
    methods: {
      init() {

      }
    },

    mounted: function () {
      this.init();
    },
  }
</script>
<style>
  .serviceReservation .demo-ruleForm{
    width: 80%;
    margin: 0 auto;
    margin-bottom: 20px;
  }
</style>
